<!DOCTYPE html>
<html>
    <head>
    <title>Kab</title>
    <link rel="stylesheet" href="http://code.jquery.com/mobile/1.0a3/jquery.mobile-1.0a3.min.css" />
    <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.5.0/jquery.min.js"></script>
    <script type="text/javascript" src="http://code.jquery.com/mobile/1.0a3/jquery.mobile-1.0a3.min.js"></script>
    <script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=false"></script>
    <script>

        var city;
        var ctry;

        var canGeoCode  = false;

        $(function(){
            $('#geoslider').bind( 'change', function(){

                if ( $(this).val() == 'man' ){
                    $('#fill_in').show();
                }else{
                	$('#fill_in').hide();
                }
            });
        });

        function getLocation(){

            $('#lctn').html("Getting location, wait please!");

            var slider      = $('#geoslider').val();

            if ( slider == 'man' ){
                if ( $('#City').val() || $('#Country').val() ){
	                canGeoCode = true;
	                geocodeit( { 'address' : $('#City').val() + ',' + $('#Country').val() } );
                }else{
                	$('#lctn').html("Please fill in");
                }
            }else{
                if ( navigator.geolocation ) {
                    navigator.geolocation.getCurrentPosition(
                            function( position ){
                            	canGeoCode = true;
                                geocodeit({ 'latLng' : new google.maps.LatLng( position.coords.latitude, position.coords.longitude ) });
                            }, function(){
                                $('#lctn').html("Can't obtain location from browser. Please fill in manually");
                            }
                    );
                }else{
                    $('#lctn').html("Browser does not have geo features. Please fill in manually");
                }
            }
        }

        function geocodeit( data ){

            if ( canGeoCode ){

	            city = '';
	            ctry = '';

                var geocoder = new google.maps.Geocoder();

	            geocoder.geocode(
	                    data,
	                    function( results, status ){
	                        if ( status == google.maps.GeocoderStatus.OK ){

	                            $.each( results[0].address_components, function( i, item ){
	                                switch( item.types[0] ){
	                                    case 'locality':
	                                        city = item.long_name;
	                                      break;
	                                    case 'country':
	                                        ctry = item.long_name;
	                                      break;
	                                }
	                            });

	                            $('#lctn').html("City: <strong>" + city + "</strong> Country: <strong>" + ctry + "</strong>");
	                        }else{
	                            $('#lctn').html("Geocoder failed due to: " + status);
	                        }
	                    }
                );
            }

            canGeoCode = false;
        }

        function svlctn(){

            $.post(
                    '/location',
                    {
                        city: city,
                        ctry: ctry
                    },
                    function( data ){
                    	$('#lctn').html("Location added");
                    }
            );
        }

    </script>
</head>
<body>
<div data-role="page">

	<div data-role="header">
		<h1>Kli Olami</h1>
		<a href="/kli" data-icon="gear" class="ui-btn-right" rel="external">Map</a>
	</div><!-- /header -->

	<div data-role="content">

        <div data-role="fieldcontain">
            <label for="geoslider">Type:</label>
            <select name="geoslider" id="geoslider" data-role="slider">
                <option value="man">Fill in</option>
                <option value="geo">Using GEO</option>
            </select>
        </div>

        <div id="fill_in">
	        <div data-role="fieldcontain">
	            <label for="City">City:</label>
	            <input type="text" name="City" id="City" />
	        </div>

	        <div data-role="fieldcontain">
	            <label for="Country">Country (optional):</label>
	            <input type="text" name="Country" id="Country" />
	        </div>
        </div>

        <p id="lctn">You can fill in your location manually or use internal geo location from your device</p>

        <button type="button" onclick="getLocation()">Get location</button>

        <button type="button" onclick="svlctn()">Save Location</button>

	</div><!-- /content -->

	<div data-role="footer">
        <div data-role="navbar">
			<ul>
                <li><a href="/" rel="external">Home</a></li>
				<li><a href="/profile" rel="external">Profile</a></li>
				<li><a href="/location" class="ui-btn-active" rel="external">My Location</a></li>
				<li><a href="/activity" rel="external">Activity</a></li>
			</ul>
		</div
	</div><!-- /footer -->
</div><!-- /page -->
<?php echo $this->partial('ga.phtml'); ?>
</body>
</html>